<template>
   
  <div>
       <Search></Search>
    <!-- 商品搜索列表页 {{ keyword }} -->
    <!-- 搜索框 -->
    <view class="search-wrapper">
        <view class="search-input">
            <icon type="search" size="16"></icon>{{keyword}}
        </view>
    </view>
    <!-- tab筛选部分 -->
    <view class="tab">
        <block v-for="(item,index) in tabs" :key="index">
            <View class="tab-item" :class="{active : index == tabIndex}" @tap="changeTab(index)">
                {{item}}
            </View>
        </block>
    </view>
    <!-- 数据类别部分 -->
    <View class="goods-list">
        <block v-for="(item,index) in lists" :key="index">
            <view class="goods-item" @tap="goToDetail(item.goods_id)">
                <image :src="item.goods_small_logo"></image>
                <view class="goods-right">
                    <view class="goods-title">{{item.goods_name}}</view>
                    <view class="price">￥{{item.goods_price}}.00</view>
                </view>
            </view>
        </block>
    </View>

    <!-- 底部提示 -->
    <View class="loading" v-if="hasMore == false">
        我也是有底线的......
    </View>
  </div>
</template>
<script>
import request from "@/utils/request";
import {getGoodsSearch} from '@/api'

export default {
  data() {
    return {
      keyword: "",
      tabs:["综合","销量","价格"],
      tabIndex:0,
      lists:[],
      pagenum:1,
      pagesize:10,
      hasMore:true
    }
  },
  onLoad(query) {
    // console.log(query);
    this.keyword = query.keyword;
  },
  onShow(){
      this.initDate();
  },
//   触底事件
  onReachBottom(){
    //重新发送请求获取数据
    //拼接数据，显示到页面中
      this.getDate();
  },
//   下拉刷新事件
    onPullDownRefresh(){
     this.initDate();
    },
  methods: {
      initDate(){
             // 初始化
        this.lists = [];
        this.pagenum = 1;
        this.hasMore = true;
        // 发送请求
        this.getDate();
      },
      changeTab(index){
          console.log(index);
          this.tabIndex = index;
      },
        // 跳转到详情页 
        goToDetail(id){
            wx.navigateTo({
                 url:"/pages/goods_detail/main" + "?goods_id="+id
            })
        },
      getDate(){
          if (!this.hasMore) {
              return;
          }

        //   发送请求的时候 提示加载中
        wx.showLoading({
            title:'加载中',
        });
          getGoodsSearch({
                query:this.keyword,
                pagenum:this.pagenum,
                pagesize:this.pagesize
                }).then(res => {
                console.log(res);
                // this.lists = res.data.message.goods
                let {goods} = res.data.message;
                this.lists = [...this.lists,...goods];
                this.pagenum +=1;
                wx.hideLoading();
                wx.stopPullDownRefresh();
                if (goods.length < this.pagesize) {
                    this.hasMore = false;
                }
    })
      }
  }
};
</script>

<style lang="scss" scoped>
.search-wrapper{
    background: #eee;
    padding:20rpx;
    .search-input{
        background:#fff;
        height:60rpx;
        font-size:15px;
        color:#999;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
    }
    .search-input icon{
    margin-right:5px;
    }
}
.tab{
    display: flex;
    border-bottom:1px #eee solid;
    .tab-item{
        flex:1;
        text-align: center;
        line-height: 100rpx;
    }
    .active{
        color:red;
    }
}
.goods-list{
    padding-left:20rpx;
    .goods-item{
        padding:20rpx 20rpx 20rpx 0;
        display: flex;
        border-bottom:1px #eee solid;
        image{
            display: block;
            width:200rpx;
            height:200rpx;
            flex-shrink: 0;
            margin-right: 20rpx;
        }
        .goods-title{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .goods-right{
            flex:1;
            display: flex;
            flex-direction:column;
            justify-content: space-between;
        }
        .price{
            color:red;
            font-size: 14px;
            span{
                font-size: 22px;
            }
        }
    }
}
.loading{
    line-height: 80rpx;
    text-align: center;
    font-size:14px;
    color:#999;
}
</style>
